<!-- 欠费账单打印凭证 -->
<template>
  <!-- 打印区 -->
  <bPrint ref="printRef">
    <div class="bill" v-if="printData.length > 0">
      <div class="bill-title">{{ org(printData[0]).name }}账单</div>
      <div class="bill-header">
        <span>日期：{{ parseTime(printData[0].billDate ?? printData[0].createTime ?? new Date()) }}</span>
      </div>
      <table class="bill-table" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <th>用户名称</th>
          <td colspan="2">{{ printData[0].accountName }}</td>
          <th>用户编号</th>
          <td colspan="2">{{ printData[0].accountNo }}</td>
          <th>用户类型</th>
          <td colspan="2">
            {{ getDictDataLabel("water_user_type", printData[0].waterProperty) }}
          </td>
        </tr>
        <tr>
          <th>表号</th>
          <th>上月表数</th>
          <th>本月表数</th>
          <th>用水量</th>
          <th>月份</th>
          <th>单价</th>
          <th>违约金</th>
          <th colspan="2">金额</th>
        </tr>
        <tr v-for="item in printData" :key="item.id">
          <td>{{ item.meterNo }}</td>
          <td>{{ item.startTon }}</td>
          <td>{{ item.endTon }}</td>
          <td>{{ item.waterConsumption }}</td>
          <td>{{ item.billBatch }}</td>
          <td>{{ item.unitPrice }}</td>
          <td>{{ item.ouvedueMoney }}</td>
          <td>{{ realityMoney(item) }}</td>
        </tr>
        <tr>
          <th>当前余额</th>
          <td>{{ printData[0].balance }}</td>
          <th>当前欠费</th>
          <td>{{ realityMoneySum }}</td>
          <th>欠费金额大写</th>
          <td colspan="4">{{ chineseCurrency(realityMoneySum) }}</td>
        </tr>
        <tr>
          <th>用水地址</th>
          <td colspan="4" style="white-space: normal">{{ printData[0].address }}</td>
          <th>抄表员</th>
          <td colspan="3">{{ printData[0].readingUserName }}</td>
        </tr>
      </table>
      <!-- <div class="bill-footer">
                <span>收款方式：{{ getDictDataLabel('pay_type', item.payType) }}</span>
                <span>收款人：{{ org(item).cashierName }}</span>
                <span>服务热线：{{ org(item).phone }}</span>
            </div> -->
    </div>
  </bPrint>
</template>

<script>
import { getPrintDetailByAccountId } from "@/api/revenue/bill";
import bPrint from "@/components/bPrint";
import { numberToChineseCurrency, waitCalculate } from "@/utils/number";

export default {
  components: { bPrint },
  data() {
    return {
      printData: [],
    };
  },
  computed: {
    org() {
      return (item) => {
        if (item.areaName?.indexOf("三水") > -1)
          return { name: "三水水厂", phone: "17365573116" };
        if (item.areaName?.indexOf("和兴") > -1)
          return { name: "和兴水厂", phone: "15183656061" };
        if (item.areaName?.indexOf("连山") > -1)
          return { name: "连山水厂", phone: "18408191610" };
        return { name: "", phone: "" };
      };
    },
    /** 金额大写 */
    chineseCurrency() {
      return (item) => {
        return numberToChineseCurrency(item);
      };
    },
    /** 应收金额 */
    realityMoney() {
      return (item) => {
        return (
          Math.max((waitCalculate(item.basicWaterMoney)
            - waitCalculate(item.waterReduceMoney)
            + waitCalculate(item.garbageMoney)
            + waitCalculate(item.sewageMoney)
            + waitCalculate(item.ouvedueMoney)
            - waitCalculate(item.ouvedueReduceMoney)) /
            100, 0)
        );
      };
    },
    /**
     * 欠费总金额
     */
    realityMoneySum() {
      let sum = this.printData.reduce((total, item) => {
        return total + this.realityMoney(item);
      }, 0)
      let balance = this.printData[0]?.balance ?? 0;
      return Math.max((waitCalculate(sum) - waitCalculate(balance)) / 100, 0)
    }
  },
  mounted() { },
  methods: {
    print(printData) {
      const billIds = [];
      printData.forEach((item) => {
        billIds.push(item.id);
      });
      getPrintDetailByAccountId({
        accountId: printData[0].accountId,
        billIds: billIds.join(","),
      }).then((res) => {
        const { meterRecordMap, reveuneAccountDO, ...resData } = res.data;
        this.printData = printData.map((item) => {
          return {
            ...item,
            accountName: reveuneAccountDO.accountName,
            accountNo: reveuneAccountDO.accountNo,
            waterProperty: reveuneAccountDO.waterProperty,
            balance: reveuneAccountDO.balance,
            address: reveuneAccountDO.address,
            ...resData,
            ...(meterRecordMap?.[item.id] ?? {}),
          };
        });
        this.$nextTick(() => {
          this.$refs.printRef.print();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bill {
  text-align: center;
  font-size: 16px;
  // page-break-after: always;
  height: 50vh;

  .bill-title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
  }

  .bill-header,
  .bill-footer {
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .bill-table {
    margin: 0 auto;
    width: 100%;
    border-collapse: collapse;

    tr:nth-child(3) {
      td {
        text-align: center;
      }
    }

    th,
    td {
      padding: 4px 8px;
      font-weight: normal;
      border: 1px solid #666;
      white-space: nowrap;
      text-align: center;
    }

    th {
      white-space: nowrap;
    }
  }
}
</style>